<template>
    <div>
        <h1>显示</h1>
        姓名
        <input type="text" v-model="can.name">
        类型
        <select v-model="can.tid">
            <option value="0">请选择</option>
            <option v-for="d in dataa" :value="d.userTypeId">{{ d.userTypeName }}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>图片</th>
                    <th>姓名</th>
                    <th>类型</th>
                    <th>性别</th>
                    <th>身份证</th>
                    <th>手机号</th>
                    <th>地址</th>
                    <th>名族</th>
                    <th>小区</th>
                    <th>房间</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in dataShow">
                    <td>{{ d.id }}</td>
                    <td><img :src="axios.defaults.baseURL+d.img" style="height: 50px; width: 50px;"></td>
                    <td>{{ d.userName }}</td>
                    <td>{{ d.userTypeName }}</td>
                    <td>{{ d.userSex==1?"男":"女" }}</td>
                    <td>{{ d.userPonple }}</td>
                    <td>{{ d.userPhone }}</td>
                    <td>{{ d.userAddr }}</td>
                    <td>{{ d.userMZ }}</td>
                    <td>{{ d.userXQ }}</td>
                    <td>{{ d.userRoom }}</td>
                    <td>{{ d.userStart==1?"未审核":"已审核"  }}</td>
                    <td><input type="button" value="修改" @click="Update(d.id)"></td>
                    <td><input type="button" value="删除" @click="IsDelete(d.id)"></td>
                     <td><input type="button" value="修改状态" @click="UpdateStart(d.id)"></td>
                </tr>
            </tbody>
        </table>
        一共{{dto.count }}条，一共{{dto.pagelist }}页，当前{{ can.pageindex}}页，每页{{can.pagesize }}条
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(can.pageindex-1)">
        <input type="button" v-for="a in dto.pagelist" :value="a" @click="FY(a)">
        <input type="button" value="下一页" @click="FY(can.pageindex+1)">
        <input type="button" value="尾页" @click="FY(dto.pagelist)">

        <select v-model="can.pagesize" @click="YRL()">
            <option value="0">请选择</option>
            <option value="1">每页1条</option>
            <option value="2">每页2条</option>
             <option value="3">每页3条</option>
              <option value="4">每页4条</option>
        </select>
    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';
import {useRouter} from 'vue-router';
const router = useRouter()
onMounted(()=>{
    Show()
    Bang()
})
const UpdateStart=(mid:number)=>{
alert(mid);

if(!confirm("确认修改状态吗"))
  {
  return;
  }
  axios.get("/api/User/UpdateStart",{params:{id:mid}}).then(res=>{
    if(res.data>0)
  {
        alert("修改状态成功")
        Show();
  }
  else{
    alert("修改状态失败");
  }
  })
}

const IsDelete=(mid:number)=>{
  if(!confirm("确认删除吗"))
  {
  return;
  }
  axios.delete("/api/User/Delete",{params:{id:mid}}).then(res=>{
    if(res.data>0)
  {
        alert("逻辑删除成功");
  }
  else{
    alert("逻辑删除失败");
  }
  })
}

const can = ref({
    tid:0,
    name:'',
    pageindex :1,
    pagesize :2
})
const Update = (mid:number)=>{
    alert(mid);
    router.push({path:'/Update',query:{id:mid}});
}
const dto =ref({
    count:0,
    pagelist:''
})

const YRL=()=>{
    can.value.pageindex=1;
    Show();
}
const FY=(a:any)=>{
    if(a>=1 && a<=dto.value.pagelist)
    {
    can.value.pageindex=a;
    Show()
    }
}

const dataa = ref([])
const Bang=()=>{
    axios.get("/api/UserType/ShowType").then(res=>{
        dataa.value = res.data;
    })
}

const dataShow = ref([])
const Show=()=>{
    axios.get("/api/User/Show",{params:can.value}).then(res=>{
        dataShow.value = res.data.pagelist;
        dto.value.count = res.data.count;
        dto.value.pagelist = Math.ceil(dto.value.count/can.value.pagesize);
    })
}
</script>
<style scoped>
</style>